<template>
    <div class="basic-info-page">
        <!-- 表格标题 -->
        <div class="table-title">基础信息查看</div>

        <!-- 基础信息表格 -->
        <div class="basic-info-table">
            <table>
                <tr>
                    <td colspan="2" class="label-cell">公司全称（必填）</td>
                    <td colspan="2" class="input-cell">
                        {{ form.companyName }}
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="label-cell">企业总人数（必填）</td>
                    <td colspan="2" class="input-cell">
                        {{ form.totalEmployees }}
                    </td>
                </tr>

                <tr>
                    <td class="label-cell">高层管理人数</td>
                    <td class="input-cell">
                        {{ form.middleManagers }}
                    </td>
                    <td class="label-cell">中层管理人数</td>
                    <td class="input-cell">
                        {{ form.grassrootsManagers }}
                    </td>
                </tr>

                <tr>
                    <td class="label-cell">基层干部人数</td>
                    <td class="input-cell">
                        {{ form.frontlineEmployees }}
                    </td>
                    <td class="label-cell">一线人数</td>
                    <td class="input-cell">
                        {{ form.oneLineEmployees }}
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="label-cell">主营业务（必填）</td>
                    <td colspan="2" class="input-cell">
                        {{ form.mainBusiness }}
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="label-cell">上一年度营收</td>
                    <td colspan="2" class="input-cell">
                        {{ form.lastYearRevenue }}
                    </td>
                </tr>
            </table>
        </div>
        <!-- 自动生成的表格 -->
        <div class="table-section">
            <div class="table-title">测评人员名单</div>
            <div class="member-table">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th style="width: 17%;">部门</th>
                            <th style="width: 17%;">姓名</th>
                            <th style="width: 17%;">岗位</th>
                            <th>层级</th>
                            <th>绩效评价</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 示例数据 -->
                        <tr class="example-row">
                            <td>例</td>
                            <td>市场部</td>
                            <td>张三</td>
                            <td>销售经理</td>
                            <td>中层</td>
                            <td>优秀</td>
                        </tr>

                        <!-- 动态生成的数据 -->
                        <template v-if="memberList.length > 0">
                            <tr v-for="(item, index) in memberList" :key="index" class="data-row">
                                <td>{{ index + 1 }}</td>
                                <!-- 修改表格中的部门显示 -->
                                <td>
                                    <van-popover v-model:show="popoverStates[`${item.department}_${index}`]"
                                        :actions="getDepartmentActions(item.department, index)" theme="dark"
                                        placement="top">
                                        <template #reference>
                                            <span @click.stop="clickDepartment(item.department, index)">
                                                {{ item.department.split('/').pop() }}
                                            </span>
                                        </template>
                                    </van-popover>
                                </td>
                                <td>{{ item.name }}</td>
                                <td>{{ item.position }}</td>
                                <td>{{ item.level }}</td>
                                <td>{{ item.performance }}</td>
                            </tr>
                        </template>

                        <!-- 无数据提示 -->
                        <tr v-else>
                            <td colspan="6" style="text-align: center; padding: 20px;">无数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getEnterpriseById } from '../../api/enterprise'

const route = useRoute()
const companyId = route.query.id

// 定义表单数据结构
const form = reactive({
    companyName: '',           // 公司全称
    totalEmployees: '',        // 企业总人数
    middleManagers: '',        // 高层管理人员数
    grassrootsManagers: '',    // 中层管理人员数
    frontlineEmployees: '',    // 基层干部人数
    oneLineEmployees: '',        // 一线人员人数
    lastYearRevenue: '',       // 上一年度营收
    mainBusiness: ''           // 主营业务
})

// 成员列表
const memberList = ref<any[]>([

])
const popoverStates = ref<Record<string, boolean>>({})
const departmentActions = ref<Record<string, Array<{ text: string, value: number }>>>({})
// 修改clickDepartment方法
const clickDepartment = (departmentPath: string, index: number) => {
    const key = `${departmentPath}_${index}`;
    // 确保该部门的状态存在
    if (popoverStates.value[key] === undefined) {
        popoverStates.value[key] = false;
    }

    // 设置当前部门的完整路径作为action
    departmentActions.value[key] = [{ text: departmentPath, value: 1 }];

    // 切换popover显示状态
    popoverStates.value[key] = !popoverStates.value[key];
}

// 修改获取actions的方法
const getDepartmentActions = (departmentPath: string, index: number) => {
    const key = `${departmentPath}_${index}`;
    return departmentActions.value[key] || [{ text: departmentPath, value: 1 }];
}



/**
 * 根据关联企业id，进行表单填充
 */
const fillForm = async (id: any) => {
    const response: any = await getEnterpriseById(id).catch(err => {
        console.log("获取失败", err);
    });
    console.log("获取的响应数据", response);
    if (response && response.data && response.code === 200) {
        const data = response.data; // 实际企业信息
        console.log("获取成功", data);

        // 填充表单
        form.companyName = data.fullName;
        form.totalEmployees = data.totalCount;
        form.middleManagers = data.hightCount;
        form.grassrootsManagers = data.midCount;
        form.frontlineEmployees = data.baseCount;
        form.oneLineEmployees = data.frontCount;
        form.mainBusiness = data.business;
        form.lastYearRevenue = data.lastRevenue;

        // 填充成员列表
        memberList.value = JSON.parse(data.currentMenber)

    }
};

onMounted(async () => {
    // 获取表单数据
    await fillForm(companyId)
})
</script>

<style scoped>
.basic-info-page {
    padding: 10px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;
}

.info-disclaimer {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

.table-title {
    text-align: center;
    font-weight: bold;
    background-color: #e0e0e0;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}

.basic-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.basic-info-table table {
    width: 100%;
    border-collapse: collapse;
}

.basic-info-table th,
.basic-info-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.label-cell {
    background-color: #f0f0f0;
    font-weight: bold;
    width: 96px;
}

.input-cell {
    padding: 0;
}

.form-actions {
    margin-top: 30px;
    padding: 0 15px;
}

.table-section {
    flex: 1;
    margin-bottom: 20px;
}

.table-title {
    text-align: center;
    font-weight: bold;
    background-color: #e0e0e0;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}

.member-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    /* 为底部导航栏预留空间 */

    padding-bottom: 70px;
}

.member-table table {
    width: 100%;
    border-collapse: collapse;
}

.member-table th,
.member-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 15%;
    /* 固定列宽 */
    font-size: 14px;
    /* 字体变小 */
}

.member-table th {
    background-color: #008080;
    color: white;
    font-weight: bold;
    font-size: 16px;

}

.example-row {
    background-color: #ffff00;
}

.member-form {
    flex: 1;
}

.form-actions {
    margin-top: 20px;
    padding: 0 15px;
}

.data-row {
    cursor: pointer;
}

.data-row:hover {
    background-color: #f0f0f0;
}
</style>